<template>
  <base-content>
    <template>
      <el-main>
        <el-form ref="form" class="fp-form" :inline="true" label-width="70px">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="form.product_name" />
          </el-form-item>
          <div class="fp-form-footer">
            <div class="pull-right">
              <el-button v-if="!isHidden" type="primary" @click="handleBaseSearch('add')">添加</el-button>
              <el-button type="default" @click="handleBaseSearch('reset')">重置</el-button>
              <el-button type="default" @click="handleBaseSearch('search')">查询</el-button>
            </div>
          </div>
        </el-form>
      </el-main>
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="id" label="商品id" />
        <el-table-column prop="product_name" label="商品名" />
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="price_discount" label="优惠价" />
        <el-table-column prop="product_type" label="类型">
          <template slot-scope="scope">
            {{ scope.row.product_type === 1 ? '商品' : '服务' }}
          </template>
        </el-table-column>
        <el-table-column prop="product_attribute" label="规格" />
        <!-- <el-table-column prop="product_attribute" label="库存" /> -->
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ? '下架' : '上架' }}
          </template>
        </el-table-column>
        <el-table-column prop="provider_dept_name_list" :show-overflow-tooltip="true" label="可使用机构" />
        <el-table-column prop="sale_scope" :show-overflow-tooltip="true" label="可售范围" />
        <el-table-column v-if="!isHidden" label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="update(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status === 0" type="primary" size="small" @click="upProduct(scope.row)">上架</el-button>
            <el-button v-if="scope.row.status === 1" type="primary" size="small" @click="downProduct(scope.row)">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-main>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange" />
      </el-main>
    </template>
  </base-content>
</template>

<script>
import { mapGetters } from 'vuex'
import { hasPermission } from '@/utils'
import { fetchPlatformProductionList, fetchPlatformUpsAndDowns } from '@/api/production-api'
export default {
  computed: {
    ...mapGetters(['sidebar']),
    routes() {
      return this.$router.options.routes
    }
  },
  data() {
    return {
      // here is dialog
      isShow: false,
      list: [],
      form: {
        product_name: ''
      },
      total: 0,
      pageNum: 1,
      pageSize: 10,
      isHidden: false
    }
  },
  async mounted() {
    const isHidden = !hasPermission('商品系统')
    this.isHidden = isHidden
    this.query({ page_size: 10, page_num: this.pageNum })
  },
  methods: {
    async query(param) {
      const params = {
        page_num: this.pageNum,
        page_size: this.pageSize,
        ...param
      }
      const result = await fetchPlatformProductionList(params)
      if (result.code === '0') {
        this.list = result.info.data
        this.total = result.info.meta.count
      }
    },
    // 编辑
    update(row) {
      this.$router.push({
        path: '/plantproduct/update',
        query: { id: row.id }
      })
    },
    // 上架
    upProduct(row) {
      const { id } = row
      fetchPlatformUpsAndDowns({ id, status: 1 }).then((res) => {
        this.query()
        this.$message.success('商品上架成功')
      })
    },
    // 下架
    downProduct(row) {
      const { id } = row
      fetchPlatformUpsAndDowns({ id, status: 0 }).then((res) => {
        this.query()
        this.$message.success('商品下架成功')
      })
    },
    // 分页回调
    pageChange(val) {
      this.pageNum = val
      this.query({ page_num: val })
    },
    // val: 当前表单中的数据, key 用来handles 中设置的唯一标识key值
    handleBaseSearch(key) {
      if (key === 'search') {
        this.query({ product_name: this.form.product_name, page_num: 1 })
      } else if (key === 'add') {
        this.$router.push({
          path: '/plantproduct/update',
          query: {
            flag: 'add'
          }
        })
      } else {
        this.query({ product_name: '', page_num: 1 })
      }
    }
  }
}
</script>
